<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.prime.com.tr/ui"
    template="/WEB-INF/templates/template.xhtml">
    
  <ui:define name="title">Cliente</ui:define>
  
  <ui:define name="body">
  
		<h:form prependId="false">
			
			<div id="dadosCliente">
				
				<div id="listaDados" class="divContent">
				
					<div>
					
						<p:dataTable
							value="#{clienteMB.listClientes}"
							var="cliente" 
							id="tableClientes"
							selection="#{clienteMB.clienteSelecionado}" 
							selectionMode="single"
			  				paginator="true"
			  				paginatorPosition="bottom"
			  				rows="15"							 
							>
						
							<p:column sortBy="#{cliente.id}">
								<f:facet name="header">
									<h:outputText value="Número" /> 
								</f:facet>
								<h:outputText value="#{cliente.id}" />
							</p:column>			
						
							<p:column sortBy="#{cliente.nome}">
								<f:facet name="header">
									<h:outputText value="Nome" /> 
								</f:facet>
								<h:outputText value="#{cliente.nome}" />
							</p:column>
							
							<p:column sortBy="#{cliente.email}">
								<f:facet name="header">
									<h:outputText value="Email" /> 
								</f:facet>
								<h:outputText value="#{cliente.email}" />
							</p:column>
							
							<p:column sortBy="#{cliente.telefone}">
								<f:facet name="header">
									<h:outputText value="Telefone" /> 
								</f:facet>
								<h:outputText value="#{cliente.telefone}" />
							</p:column>																		
						</p:dataTable>
											
					</div>
					
					<div class="divContent">
					
						<p:commandButton value="Novo" 
							action="#{clienteMB.novoCliente}"
							id="btnNovo"
							update="nome email telefone"
							oncomplete="onClickBtnNovo()" 
						/>					
						
						
						<p:commandButton value="Editar" 
							action="#{clienteMB.editarCliente}" 
							id="btnEditar"
							update="nome email telefone"
							oncomplete="onClickBtnEditar()" 
						/>
								
						<p:commandButton value="Remover" 
							action="#{clienteMB.removerCliente}"
							id="btnRemover"
							update="tableClientes"
							oncomplete="bindClickTable()" 
						/>								
					</div>
										
				</div>
				
				<div id="dados" style="display: none;">
				
					<div>
						<p>
							<h:outputLabel value="Nome:"  for="nome"/>
							<p:inputText value="#{clienteMB.cliente.nome}" id="nome" size="60"/>
						</p>
					
						<p>
							<h:outputLabel value="Email:"  for="email"/>
							<p:inputText value="#{clienteMB.cliente.email}" id="email" size="60"/>
						</p>
						
						<p>
							<h:outputLabel value="Telefone:"  for="telefone"/>
							<p:inputMask mask="(99) 9999-9999" value="#{clienteMB.cliente.telefone}" id="telefone" />
						</p>															
					</div>
				
					<div class="divContent">
					
						<p:commandButton value="Salvar" 
							action="#{clienteMB.adicionarCliente}" 
							id="btnSalvarNovo"
							update="tableClientes"
							oncomplete="onClickBtnSalvar()" 
							/>
												
						<p:commandButton value="Salvar" 
							action="#{clienteMB.atualizarCliente}" 
							id="btnSalvarEditar"
							update="tableClientes"
							oncomplete="onClickBtnSalvar()" 
							/>
						
						<p:commandButton value="Cancelar"
							id="btnCancelar" 
							onclick="onClickBtnCancelar()"
						/>											
							
					</div>											
				</div>
				
			</div>
							
		</h:form>		
  </ui:define>
  
  <ui:define name="js">
  	<h:outputScript name="dados.js" library="js"/>
  </ui:define>  
  
</ui:composition>